<template>
<div class="board">
  <div class="left">
  <course-panel 
  v-for="({name},key) in data.courses" 
  :course-name="name"
  :course-key="key"
  @handle-drag-end="handleDragEnd"
  >

  </course-panel>
  </div>
  <div class="right"
  @dragover="handleDragOver"
  @dragenter="handleDragEnter"
  
  >
  <table border="1">
  <tr>
    <th>时间段/星期</th>
    <th v-for="(weekday,index) of data.weekdays" :key="index">{{weekday}}</th>
  </tr>

  <tr  v-for="(timeSlot,index) of data.time_slot" 
  :key="index">
    <th class="time_slot">{{ timeSlot }}</th>
    <td 
    v-for="weekday in 7"
    :data-weekday="weekday"
    :data-time-slot="index"
    >
    <template v-if="cellData[`${weekday}-${index}`]">
      <course-panel 
    :course-name="data.courses[cellData[`${weekday}-${index}`]].name"
    :course-key="cellData[`${weekday}-${index}`]"
    v-course-panel="{
      cellData,
      weekday,
      timeSlot:index

    }"
    >
    </course-panel>
    </template>
  
    </td>
  </tr>
  </table>
  </div>
</div>
</template>

<script setup>
import {ref} from 'vue'
import CoursePanel from "./components/CoursePanel";
import vCoursePanel from "./components/CoursePanel/vCoursePanel.jsx";
const data ={
    weekdays:[
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"
    ],
    time_slot:[
        "08:00-8:50",
        "09:00-9:50",
        "10:00-10:50",
        "11:00-11:50",
        "12:00-12:50",
        "13:00-13:50",
        "14:00-14:50",
        "15:00-15:50",
        "16:00-16:50",
        "17:00-17:50",
    ],
    courses:{
        chinese:{
            name:'语文',
            teachers:["张三","李四"],
        },
        math:{
            name:'数学',
            teachers:["王五","赵六"],
        },
        english:{
            name:'英语',
            teachers:["陈七","孙八"],
        }    
    }
}
/**
 * weekday 列
 * timeslot 行
 * 
 *  {
 *  1-5:chinese / english / math 定位单元格
 * }
 */

const cellData = ref({
  '1-1':'chinese',
  '2-5':'math',
  '3-3':'english',

})
let targetCell = null

function handleDragOver(e) {
  e.preventDefault();// 默认行为回来动作去掉  我们不是放入的拖动数据，而是拖动数据进入的区域，我们不希望有默认行为
  
}
function handleDragEnter(e) {
  e.preventDefault();
  const tar = e.target
  console.log(tar)
  const tagName= tar.tagName.toLowerCase()

  targetCell = tagName !== 'td' ? null : tar
  
}
function handleDragEnd(target) {
 
  if (targetCell) {
    console.log(target)
    const weekday = targetCell.dataset.weekday
    const timeslot = targetCell.dataset.timeSlot
    const prop = `${weekday}-${timeslot}`

    if (!cellData.value[prop]) {
      const key = target.dataset.key
      cellData.value[prop] = key
    }
  }
}
</script>



<style scoped>
.board{
  position: relative;
  .left{
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
  }
  .right{
    width:100%;
    height: 800px;
    padding-left: 300px;
    box-sizing: border-box;
    table{
      width: 100%;
      height: 100%;
      border-collapse: collapse;
      table-layout: fixed;

      td{
       height: 100px;
      }
    }
  }
}
</style>
